<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ShareWell - awesome tag line here</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link href="../bootstrap.css" rel="stylesheet">
    <link href="sharewell.css" rel="stylesheet">

    <style type="text/css">
        body {
            padding-top: 60px;
        }
    </style>

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>

<body>

<div class="topbar">
    <div class="fill">
        <div class="container">
            <a class="brand" href="#"><img src="images/sitelogo.png"></a>
            <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="search.html">Search</a></li>
                <li><a href="#about">Profile</a></li>
                <li><a href="#contact">Login</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="sw-hero-background">

    <div class="container">

        <!-- Main hero unit for a primary marketing message or call to action -->
        <div class="sw-hero-left-container">
            <img src="images/communityBanner.png"/>
            <h1>Sharewell Community</h1>

            <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere
                velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem
                nec elit.</p>
        </div>

        <div class="sw-hero-right-container">
            <div class="sw-hero-right-button">
                <img src="images/find-home.png"/>
                <h1>Search</h1>
            </div>
            <div class="sw-hero-right-button">
                <img src="images/request-home.png"/>

            <h1>Request</h1>

                <br/>
            </div>

            <div class="sw-hero-right-button">
                <img src="images/lend-home.png"/>

            <h1>Lend</h1>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="sw-clear-both"/>
    <!-- Example row of columns -->
    <h2>Most Popular Products</h2>

    <div class="row">
        <div class="span16">
            <ul class="media-grid">
                <li>
                    <a href="#">
                        <img class="thumbnail" src="http://placehold.it/210x240" alt="">

                        <h3>ProductName</h3>

                        <p>bababa</p>
                    </a>

                </li>
                <li>
                    <a href="#">
                        <img class="thumbnail" src="http://placehold.it/210x240" alt="">

                        <h3>ProductName</h3>

                        <p>bababa</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img class="thumbnail" src="http://placehold.it/210x240" alt="">

                        <h3>ProductName</h3>

                        <p>bababa</p>
                    </a>

                </li>
                <li>
                    <a href="#">
                        <img class="thumbnail" src="http://placehold.it/210x240" alt="">

                        <h3>ProductName</h3>

                        <p>bababa</p>
                    </a>

                </li>
            </ul>
        </div>
    </div>

    <footer>
        <p>&copy; ShareWell 2012</p>
    </footer>

</div>
<!-- /container -->

</body>
</html>
